<template>
  <div class="app">
    <!---------- 查询表单form begin ----------->
    <a-form class="smart-query-form">
      <a-row class="smart-query-form-row">
        <a-form-item label="电键" class="smart-query-form-item">
          <a-input style="width: 200px" v-model:value="queryForm.docEntry" placeholder="电键" />
        </a-form-item>
        <a-form-item label="考场名称" class="smart-query-form-item">
          <a-input style="width: 200px" v-model:value="queryForm.romName" placeholder="考场名称" />
        </a-form-item>

        <a-form-item class="smart-query-form-item">
          <a-button-group>
            <a-button type="primary" @click="onSearch">
              <template #icon>
                <SearchOutlined />
              </template>
              查询
            </a-button>
            <a-button @click="resetQuery" class="smart-margin-left10">
              <template #icon>
                <ReloadOutlined />
              </template>
              重置
            </a-button>
          </a-button-group>
        </a-form-item>
      </a-row>
    </a-form>
    <!---------- 查询表单form end ----------->

    <!---------- 表格操作行 begin ----------->
    <a-row class="smart-table-btn-block">
      <a-button-group></a-button-group>
      <div class="smart-table-setting-block">
        <TableOperator v-model="columnsa" :tableId="null" :refresh="queryData" />
      </div>
    </a-row>
    <!---------- 表格操作行 end ----------->
    <a-row justify="space-around">
      <a-col :span="24">
        <a-card hoverable>
          <a-table
              :header-height="30"

              :dataSource="data.tableaData"
              :columns="columnsa"
              rowKey="docEntry"
              :loading="tableLoading"


              :scroll="{x:1500,y:600}"
              :customRow="onRow"
              :pagination="{
                showSizeChanger: true,
                showQuickJumper: true,
                defaultPageSize: 20,
                pageSizeOptions: ['20', '50', '100', '200'],
              }"
          >
          </a-table>
        </a-card>
      </a-col>
    </a-row>
    <a-row justify="space-around" style="height: 600px">
      <a-col :span="24">
        <a-card hoverable>
          <a-table
              :header-height="30"
              :scroll="{x:1500,y:600}"
              :dataSource="data.tablebData"
              :columns="columnsb"
              rowKey="lineNum"
              :loading="tableLoading"
              :pagination="{
                showSizeChanger: true,
                showQuickJumper: true,
                defaultPageSize: 100,
                pageSizeOptions: ['20', '50', '100', '200'],
              }"

          >
          </a-table>
        </a-card>
      </a-col>
    </a-row>
    <!---------- 表格 begin ----------->

  </div>
</template>
<script setup>
import { reactive, ref, onMounted } from 'vue';
import { examromApi, examromaApi } from '/src/api/business/exam/examrom-api.js';
import { smartSentry } from '/src/lib/smart-sentry';
import TableOperator from '/src/components/support/table-operator/index.vue';

import { columnsa, columnsb } from '/@/views/business/exam/statisticsData/data.js';

// ---------------------------- 表格列 ----------------------------

// ---------------------------- 查询数据表单和方法 ----------------------------
const queryFormState = {
  docEntry: undefined, //电键
  pageNum: 1,
  pageSize: 500,
  romName: '',
};

const data = reactive({
  tableaData: [],
  tablebData: [],
  activeKey: '1',
  lineData: {
    openNum: 0,
    actExamNum: 0,
    misExamNum: 0,
    passNum: 0,
  },
});

// 查询表单form
const queryForm = reactive({ ...queryFormState });
// 表格加载loading
const tableLoading = ref(false);

function resetQuery() {
  let pageSize = queryForm.pageSize;
  Object.assign(queryForm, queryFormState);
  queryForm.pageSize = pageSize;
  queryData();
}

// 搜索
function onSearch() {
  queryForm.pageNum = 1;
  queryData();
}

// 查询数据
async function queryData() {
  tableLoading.value = true;
  try {
    let queryResult = await examromApi.statis(queryForm);
    data.tableaData = queryResult.data;
  } catch (e) {
    smartSentry.captureError(e);
  } finally {
    tableLoading.value = false;
  }
}

function onRow(item) {
  return {
    onClick: () => {
      tableLoading.value = true;
      data.lineData = item;
      examromaApi.queryList(item.docEntry).then((res) => {
        data.tablebData = res.data;
        tableLoading.value = false;
      });
    },
  };
}

onMounted(queryData);
</script>

<style scoped lang="less">
.table-wrap {
  width: 100%;
  height: 600px;
  color: #cccccc;
  .scroll {
    max-height: 278px;
    overflow: hidden;
  }
}

.titleContent {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
  .tit {
    flex: 0 0 16.6%;
    text-align: center;
  }
}

.countContent {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  font-size: 14px;
  .descr {
    flex: 0 0 16%;
    padding: 10px 0;
    text-align: center;
  }
}

.countContent:nth-of-type(odd) {
  background: #318699 !important;
  .descr {
    border-right: 1px solid #247587;
  }
}
</style>
